<template>
  <div class="dashboard-container">
    <div class="dashboard-hd">
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="item item1">
            <div class="item-l">
              <span>待发货订单</span>
              <h2>{{orderNum.receiptConfirmedNumber}}</h2>
            </div>
            <img class="item-r" src="../../assets/headImg.png" alt="">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item item2">
            <div class="item-l">
              <span>待收货订单</span>
              <h2>{{orderNum.deliverdNumber}}</h2>
            </div>
            <img class="item-r" src="../../assets/headImg.png" alt="">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item item3">
            <div class="item-l">
              <span>已完成订单</span>
              <h2>{{orderNum.inspectedNumber}}</h2>
            </div>
            <img class="item-r" src="../../assets/headImg.png" alt="">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item item4">
            <div class="item-l">
              <span>总订单</span>
              <h2>{{orderNum.allOrderNumber}}</h2>
            </div>
            <img class="item-r" src="../../assets/headImg.png" alt="">
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="dashboard-bd">
      <el-row :gutter="24">
        <el-col :span="18">
          <div class="bd-l">
            <div class="order-status">
              <h3 class="title">订单状态</h3>
              <div v-loading="chartLoading" id="c1" ref="main" class="leftechats" />
            </div>
            <div class="order-task">
              <h3 class="title">待办任务</h3>
              <div class="empty" v-if="todoList.length <= 0 && !leftLoading">
                <img src="https://concrete.oss-cn-hangzhou.aliyuncs.com/uploads/empty.png" />
                <p>暂无待办</p>
              </div>
              <div v-else class="task-list" v-loading="leftLoading">
                <el-row :gutter="24">
                  <el-col :span="8" v-for="(item,i) in todoList" :key="i">
                    <div class="box-card" @click="linkToDetail(item.id)">
                      <h4>{{item.title}}</h4>
                      <div class="card-bd">
                        <div class="item"><span>总计预算量：</span>{{item.totalBudget}}m³</div>
                        <div class="item"><span>收货人：</span>李富贵 13184920473  </div>
                      </div>
                      <div class="card-fd">
                        <span>{{item.createTime}}</span>
                        <span>查看详情</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="bd-r">
            <h3 class="title">待确认订单</h3>
            <div class="bd-r-list" v-loading="rightLoading">
              <div class="empty" v-if="orderList.length == 0 && !rightLoading">
                <img src="https://concrete.oss-cn-hangzhou.aliyuncs.com/uploads/empty.png" />
                <p>暂无数据</p>
              </div>
              <template v-else>
                <div class="bd-r-item" v-for="(item,i) in orderList" :key="i">
                  <h4>{{item.title}}</h4>
                  <div class="card-bd">
                    <div class="item"><span>要求供应时间：</span>{{item.supplyTime}}</div>
                    <div class="item"><span>总计预算量：</span>{{item.totalBudget}}m³</div>
                  </div>
                  <div class="card-fd">
                    <el-button type="primary" size="medium" plain @click="orderConfirmShow(item.id)">订单确认</el-button>
                  </div>
                </div>
              </template>
              
            </div>
            <div class="page-box" v-if="showPage">
              <pagination :pageBean="pageBean" @current-change="handleCurrentChange" :pagerCount="pagerCount" :isShowPageTotal="false" :hasJump="false"></pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 订单确认 -->
    <el-dialog title="订单确认" width="600px" :visible.sync="orderConfirmVisible"> 
      <div class="confirm-bd">
        <h3>请仔细核对订单信息，并填写预计发货时间。</h3>
        <el-form :model="confirmForm" :rules="confirmRules" ref="confirmForm" label-width="120px" label-position="left">
          <el-form-item label="预计发货时间" prop="estimatedDeliveryTime">
            <el-date-picker
              v-model="confirmForm.estimatedDeliveryTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
            v-model="confirmForm.supplierRemarks">
          </el-input>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="orderConfirmVisible = false">取 消</el-button>
          <el-button type="primary" @click="orderConfirm" :loading="btnLoading">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>
import pagination from "../../components/table/pagination.vue"
import { PageBean } from "@/utils/page-bean";
import moment from 'moment'
export default {
  components:{pagination},
  data() {
    return {
      //分页
      pageBean:new PageBean(5,1,0),
      showPage:false,//是否显示分页
      pagerCount:5,//每页显示的数量

      //订单确认
      orderId:null,
      orderConfirmVisible:false,
      confirmForm:{
        estimatedDeliveryTime:"",
        supplierRemarks:"",
      },
      btnLoading:false,
      confirmRules:{
        estimatedDeliveryTime: [{ required: true, message: '请选择预计发货时间', trigger: 'change' }],
      },

      //订单统计
      orderNum:{},
      //待办列表
      todoList:[],
      //待确认订单列表
      orderList:[],

      //加载
      chartLoading:true,
      leftLoading:false,
      rightLoading:false,

    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.getOrderPageList()
      this.getTodoTask(6)
      this.getOrderNum()
    },
    //获取订单统计数据
    getOrderNum(){
      this.chartLoading = true
      this.$api.procurementOrderList({status:'6'}).then(res => {
        this.orderNum = res
        this.chartLoading = false
        this.inits()
      }).catch(()=>{this.chartLoading = false})
    },
    //获取待办任务
    getTodoTask(status){
      this.leftLoading = true
      this.$api.orderList({
        current: 1,
        size: 9,
        status: status
      }).then(res => {
        this.todoList = res.records
        this.leftLoading = false
      }).catch(res => {this.leftLoading = false})
    },
    //获取待确认订单列表
    getOrderPageList() {
      this.rightLoading = true
      this.$api.orderList({
        current: this.pageBean.pageIndex,
        size: this.pageBean.pageSize,
        status: "3"
      }).then(res => {
        this.orderList = res.records
        this.pageBean.Total = res.total
        if(res.total > this.pageBean.pageSize) this.showPage = true
        this.rightLoading = false
      }).catch(()=>{this.rightLoading = false})
    },
    orderConfirmShow(id){
      this.orderId = id
      this.orderConfirmVisible = true
    },
    //订单确认
    orderConfirm(){
      this.$refs.confirmForm.validate((valid) => {
        if(valid){
          this.btnLoading = true
          let data = JSON.parse(JSON.stringify(this.confirmForm))
          data.estimatedDeliveryTime = moment(data.estimatedDeliveryTime).format('YYYY-MM-DD HH:mm:ss')
          data.id = this.orderId
          this.$api.orderConfirm(data).then(res => {
            this.btnLoading = false
            this.orderConfirmVisible = false
            this.confirmForm = {
              estimatedDeliveryTime:"",
              supplierRemarks:"",
            },
            this.init()
          }).catch(()=>{this.btnLoading = false})
        }
      })
    },
    //表单初始化
    inits() {
      let data = [
        {
          name:'待确认',
          value:this.orderNum.receiptingNumber
        },
        {
          name:'待发货',
          value:this.orderNum.receiptConfirmedNumber
        },
        {
          name:'已发货',
          value:this.orderNum.deliverdNumber
        },
        {
          name:'已收货',
          value:this.orderNum.receivedNumber
        },
        {
          name:'待结算',
          value:this.orderNum.beingAcceptNumber
        },
        {
          name:'已完成',
          value:this.orderNum.inspectedNumber
        },
        {
          name:'已取消',
          value:this.orderNum.cancelNumber
        }
      ]
      const chart = new G2.Chart({
        container: "c1",
        forceFit: true,
        height:'400'
      })
      chart.source(data);
      chart.scale('value', {
        tickInterval: 2
      });
      chart.interval().position('name*value').color('name', ['#007AFF', '#5EDEB7', '#FFA432', '#2E61FE','#5BCF02','#FF86C2','#FF6862']);
      chart.render();
    },
    //当前页面改变
    handleCurrentChange(e){
      this.pageBean.pageIndex = e
      this.getOrderPageList()
    },
    linkToDetail(id){
      this.$router.push({
        name:"Detail",
        query:{
          id:id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  min-width: 1200px;
  .dashboard-hd{
    margin-bottom: 24px;
    .item{
      display: flex;
      padding: 0 24px;
      height: 118px;
      justify-content: space-between;
      align-items: center;
      border-radius: 2px;
      .item-l{
        display: flex;
        flex-direction: column;
        color: #FFFFFF;
        span{
          font-size: 15px;
        }
        h2{
          font-size: 34px;
          margin: 10px 0 0;
        }
      }
      .item-r{
        width: 62px;
        height: 62px;
      }
      &.item1{
        background: linear-gradient(270deg, #C773FD 0%, #4669FE 100%);
        box-shadow: 0px 32px 80px -40px rgba(187, 114, 253, 0.5);
      }
      &.item2{
        background: linear-gradient(270deg, #606AF1 0%, #3CADF6 100%);
        box-shadow: 0px 32px 80px -40px #4F8AF4;
      }
      &.item3{
        background: linear-gradient(270deg, #F09D5B 0%, #EA647E 100%);
        box-shadow: 0px 32px 50px -40px rgba(237, 126, 111, 0.5);
      }
      &.item4{
        background: linear-gradient(270deg, #A8E25F 0%, #40D799 100%);
        box-shadow: 0px 30px 50px -40px rgba(117, 220, 123, 0.5);
      }
    }
  }
  .dashboard-bd{
    h3.title{
      font-size: 20px;
      margin: 0 0 24px 0;
      line-height: 1;
      color: #28323F;
    }
    .bd-l{
      .order-status{
        border-radius: 4px;
        background: #fff;
        padding: 24px;
        margin-bottom: 24px;
        .leftechats {
          width: 100%;
          height: 380px;
        }
      }
      .order-task{
        border-radius: 4px;
        background: #fff;
        padding: 24px;
        .box-card{
          background: #F6F8F9;
          border-radius: 4px;
          padding: 24px 24px 0;
          cursor: pointer;
          h4{
            margin: 0 0 15px;
            font-size: 17px;
            color: #28282C;
          }
          .card-bd{
            .item{
              display: flex;
              font-size: 14px;
              color: #111E36;
              margin-bottom: 10px;
              span{
                color: #94A6C0;
              }
            }
          }
          .card-fd{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #D4E2ED;
            margin-top: 16px;
            height: 42px;
            color: #94A6C0;
            font-size: 13px;
          }
        }
        .task-list{
          min-height: 158px;
        }
      }
    }
    .bd-r{
      border-radius: 4px;
      background: #fff;
      padding: 24px;
      .bd-r-list{
        .bd-r-item{
          background: #F6F8F9;
          border-radius: 4px;
          padding: 24px;
          margin-bottom: 20px;
          h4{
            margin: 0 0 15px;
            font-size: 17px;
            color: #28282C;
          }
          .card-bd{
            .item{
              display: flex;
              font-size: 14px;
              color: #111E36;
              margin-bottom: 10px;
              span{
                color: #94A6C0;
              }
            }
          }
          .card-fd{
            margin-top: 16px;
          }
        }
      }
    }
  }
}
.page-box{
  display: flex;
  justify-content: center;
}
.confirm-bd{
  h3{
    margin: 0 0 30px;
  }
  .dialog-footer{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
.empty{
  display: flex;
  padding: 40px 0;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  img{
    width: 210px;
  }
  p{
    font-size: 12px;
    color: #ccc;
  }
}
</style>
